
import { Component } from 'react'
import styls from './style.less'
class Tag extends Component {
  constructor(props) {
    super(props)
  }
  presetsColor = [
    'magenta',
    'red',
    'volcano',
    'orange',
    'gold',
    'lime',
    'green',
    'cyan',
    'blue',
    'geekblue',
    'purple',
  ]
  getTagClassName() {
    const { color } = this.props
    
    let tagClassName = ['customTag-tag']
    if(this.presetsColor.includes(color)) {
      tagClassName.push(`customTag-${color}`)
    }
    return tagClassName.join(' ')
  }
  getCustomColor() {
    const { color, contentStyle } = this.props
    if(!this.presetsColor.includes(color)) {
      return {
        ...contentStyle,
        backgroundColor: color,
        color: '#fff',
        borderColor: 'transparent'
      }
    }
  }
  render() {
    const { children } = this.props
    return <span className={styls.customTag}>
      <span className={this.getTagClassName()} style={this.getCustomColor()}>{children}</span>
    </span>
  }
}
export default Tag